import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import ToastUtil from '../../../../utils/toast';
const scale = GLOBAL.SCALE;

const creditType = [
	{
		key: 1, value: '预付'
	}, {
		key: 2, value: '赊销'
	}
]
export const CreditTabs = (props) => {
	const { onPress, onTextPress, ifEdit, currentCreditType, corpTypeList } = props;
	const addBtn = ifEdit ?
		<Text style={styles.creditApplyBtn} onPress={() => { this._onTextPress() }}>新增授信</Text>
		: null;


	_onTextPress = () => {
		let onoff = false;
		corpTypeList && corpTypeList.forEach(element => {
			if (parseInt(element) == currentCreditType) {
				onoff = true;
			}
		});
		if (onoff) {
			onTextPress();
		} else {
			ToastUtil.showWarning('该企业类型（合作关系）暂不支持申请');
		}
	}


	return (
		<View style={styles.creditTabView}>
			<View style={styles.creditTabs}>
				{
					creditType.map((item, index) => {
						return (
							<View style={styles.creditTypeView}>
								<Text key={index} style={[styles.creditTabText, { color: currentCreditType === item.key ? style.color.themeColor : '#000' }]}
									onPress={() => onPress(item.key)}>{item.value}</Text>
								{
									currentCreditType === item.key ?
										<Image style={styles.creditTypeImg} source={require('../../../../imgs/customer/blueRorrow.png')}></Image>
										: null
								}
							</View>
						)
					})
				}
				{addBtn}
			</View>
		</View>
	)
}

export const CreditFilterTabs = (props) => {
	const { onPress, creditApplyStatus, creditFitlerTypes } = props;

	return (
		<View style={styles.creditListFilterView}>
			<View style={[styles.creditListFilters, { backgroundColor: !creditApplyStatus ? '#c6ddf4' : null, borderWidth: !creditApplyStatus ? 0 : 1 * scale }]}>
				<Text style={[styles.creditListFilterText, { color: !creditApplyStatus ? style.color.themeColor : '#979797' }]}
					onPress={() => onPress('')}>全部</Text>
			</View>
			{
				creditFitlerTypes.map((item, index) => {
					return (
						<View key={index} style={[styles.creditListFilters, { backgroundColor: creditApplyStatus === item.dictKey ? '#c6ddf4' : null, borderWidth: creditApplyStatus === item.dictKey ? 0 : 1 * scale }]}>
							<Text style={[styles.creditListFilterText, { color: creditApplyStatus === item.dictKey ? style.color.themeColor : '#979797' }]}
								onPress={() => onPress(item.dictKey)}>{item.dictName}</Text>
						</View>
					)
				})
			}
		</View>
	)
}

const styles = StyleSheet.create({
	creditTypeView: {
		flex: 2,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
	creditTypeImg: {
		position: 'absolute',
		bottom: -17 * scale,
		left: '44%'
	},
	creditApplyBtn: {
		flex: 1,
		textAlign: 'center',
		color: style.color.themeColor,
		padding: 6 * scale,
		borderWidth: 1 * scale,
		borderColor: style.color.themeColor,
		borderRadius: 8 * scale,
		fontSize: 12 * scale
	},
	creditTabView: {
		backgroundColor: style.color.themeColor,
		paddingBottom: 68 * scale
	},
	creditTabs: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#fff',
		borderRadius: 4 * scale,
		width: 351 * scale,
		marginLeft: 12 * scale,
		padding: 10 * scale,
	},
	creditTabText: {
		flex: 1,
		textAlign: 'center',
		fontSize: 14 * scale,
		fontWeight: '600'
	},
	creditListFilterView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		flexWrap: 'wrap',
		marginTop: 40 * scale,
		top: -40 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		marginBottom: 16 * scale
	},
	creditListFilters: {
		borderWidth: 1 * scale,
		borderColor: '#979797',
		borderRadius: 16 * scale,
		paddingLeft: 8 * scale,
		paddingRight: 8 * scale,
		paddingTop: 6 * scale,
		paddingBottom: 6 * scale,
		marginRight: 12 * scale
	},
	creditListFilterText: {
		fontSize: 12 * scale,
		textAlign: 'center',
		color: style.color.themeColor,

	}
})